<!-- 用户奖品管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="()=>{ searchData = {} }" searchConditionNum="6">
        <GzTextUp v-model:value="searchData['realName']" placeholder="用户名称" />
        <GzTextUp v-model:value="searchData['phone']" placeholder="手机号" />
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['awardType']" placeholder="奖品类型">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="0">卡券</a-select-option>
            <a-select-option :value="1">实物</a-select-option>
            <a-select-option :value="2">虚拟券</a-select-option>
          </a-select>
        </a-form-item>
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'awardType'">
            <template v-if="record.awardType == 0">卡券</template>
            <template v-if="record.awardType == 1">实物</template>
            <template v-if="record.awardType == 2">虚拟券</template>
          </template>

          <template v-if="column.key === 'state'">
            <a-badge v-if="record.state === 0" status="success" text="未使用" />
            <a-badge v-if="record.state === 1" status="default" text="已使用" />
            <a-badge v-if="record.state === 2" status="error" text="已过期" />
            <a-badge v-if="record.state === 3" status="processing" text="待激活" />
            <a-badge v-if="record.state === 4" status="default" text="已失效" />
          </template>

          <template v-if="column.key === 'operation'">
            <a-button type="link">详情</a-button>
          </template>
        </template>
      </GzTable>
    </a-card>
  </page-header-wrapper>
</template>

<script lang="ts" setup>
import { req, API_URL_FANS_AWARD } from '@/api/manage'
import {$apiFansFansAndFansAward} from '@/api/fansManage/fansAward/index'
import { ref, reactive, getCurrentInstance } from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const infoTableRef = ref()

let tableColumns = reactive([
  {
    key: 'fansId',
    title: 'fansId',
    dataIndex: 'fansId',
    width: 80,
    fixed: 'left',
  },
  // {
  //   key: 'realName',
  //   title: '用户名称',
  //   dataIndex: 'realName',
  //   width: 120,
  // },
  {
    key: 'phone',
    title: '手机号',
    dataIndex: 'phone',
    width: 120,
    minWidth: 120,
    maxWidth: 150,
  },
  {
    key: 'awardName',
    title: '奖品名称',
    dataIndex: 'awardName',
    width: 200,
  },
  {
    key: 'awardType',
    title: '奖品类型',
    dataIndex: 'awardType',
    width: 100,
  },
  {
    key: 'createdAt',
    title: '获取奖品时间',
    dataIndex: 'createdAt',
    width: 180,
  },
  {
    key: 'activateTime',
    title: '激活奖品时间',
    dataIndex: 'activateTime',
    width: 180,
  },
  {
    key: 'writeTime',
    title: '核销奖品时间',
    dataIndex: 'writeTime',
    width: 180
  },
  {
    key: 'overTime',
    title: '奖品过期时间',
    dataIndex: 'overTime',
    width: 180
  },
  {
    key: 'state',
    title: '奖品状态',
    dataIndex: 'state',
    width: 100,
  },
  {
    key: 'mchName',
    title: '核销商家',
    dataIndex: 'mchName',
    width: 140,
  },
  // { key: 'operation', title: '操作', dataIndex: 'operation',width: 260, fixed: 'right', align: 'center' }
])

const searchData:any = ref({})

// 请求table接口数据
function reqTableDataFunc(params: any) {
  return $apiFansFansAndFansAward(params)
}

function searchFunc() {
  infoTableRef.value.refTable(true)
}

/* 查询时间更改 */
function queryTimeChange(dates:  [string, string], dateStrings: [string, string]){
  if(dates){
    searchData.value['sTime']=dateStrings[0]
    searchData.value['eTime']=dateStrings[1]
  }else{
    delete searchData.value['sTime']
    delete searchData.value['eTime']
  }
}

</script>
